<template>
  <template v-if="visible">
    <teleport to="body">
      <div
        class="t-modal-mask"
        :class="['t-modal-mask-' + mackTheme]"
        @click.self="maskClick"
      >
        <div
          class="t-modal"
          :style="{ width: width, 'z-index': zIndex }"
        >
          <div class="t-modal-header">
            <div class="t-modal-header-title">
              <template v-if="slots['header']">
                <slot name="header"></slot>
              </template>
              <span v-else>{{title}}</span>
            </div>
            <div class="t-modal-header-close">
              <Icon @click="close" name="close"/>
            </div>
          </div>
          <div class="t-modal-body">
            <slot></slot>
          </div>
          <template v-if="slots['footer']">
            <slot name="footer"></slot>
          </template>
          <div v-else class="t-modal-footer">
            <Button @click="cancel">{{cancelText}}</Button>
            <Button @click="ok" theme="primary">{{okText}}</Button>
          </div>
        </div>
      </div>
    </teleport>
  </template>
</template>

<script setup lang="ts">
import { defineProps , useSlots , defineEmits } from "vue";
import PropData from "@/views/props/Modal.prop";

const {
  visible,
  mackTheme,
  width,
  zIndex,
  mackClosable,
  title,
  okText,
  cancelText,
} = defineProps(PropData);
const emit = defineEmits(["update:visible","ok","cancel",'close']);
const slots = useSlots()

// 关闭
const close = () => {
  emit('close')
  emit("update:visible", false);
};
// 确认按钮点击事件
const ok = ()=>{
  emit('ok')
}
// 取消按钮点击事件
const cancel = ()=>{
  emit('cancel')
}

// 遮罩点击
const maskClick = () => {
  if (mackClosable) {
    close();
  }
};


</script>
<style lang="scss" scoped>
.t-modal-mask {
  position: fixed;
  height: 100%;
  overflow: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  .t-modal {
    background-color: #fff;
    border-radius: 6px;
    background-clip: padding-box;
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    &-header{
      min-height: 30px;
      padding: 10px;
      display: flex;
      border-bottom: 1px solid #e8eaec;
      align-items: center;
      &-title{
        flex: 1;
        span{
          font-weight: bold;
        }
      }
      &-close{
        .icon{
          width: 20px;
          height: 20px;
          cursor: pointer;
          color: #999;
        }
      }
    }
    &-body{
      padding: 10px;
    }
    &-footer{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #e8eaec;
      padding: 10px;
      >.t-button{
        margin-left: 10px;
      }
    }
  }
}
.t-modal-mask-dark {
  background-color: rgba(55, 55, 55, 0.4);
}
.t-modal-mask-light {
  background-color: rgba(255, 255, 255, 0.4);
}
</style>
